<template>
  <div class='container'>
    <div class="question">
      <el-card>
        <!-- 按钮 -->
        <div class="btn_wrapper">
          <el-button style="float:right" icon="el-icon-edit" @click="$router.push('new')" type="success"
            size="small">新增试题</el-button>
        </div>
        <p class="heard-text">说明：目前支持学科和关键字条件筛选</p>
        <el-form ref="questionsForm" :model="questionsForm" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <!-- changeSubject 学科改变时需要根据对应的学科去查询 -->
                <el-select style="width:100%" v-model="questionsForm.subjectID" @change="changeSubject"
                  placeholder="请选择">
                  <el-option v-for="item in subjectOptions" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="questionsForm.catalogID" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in directoryOptions" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="questionsForm.tags" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in tagOptions" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input v-model="questionsForm.keyword"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="questionsForm.questionType" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in questionTypeOptions" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="questionsForm.difficulty" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in diffOptions" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="questionsForm.direction" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in directionOptions" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="questionsForm.creatorID" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in userOptions" :key="item.id" :label="item.username"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="questionsForm.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="questionsForm.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <!-- 城市 -->
                <!-- 先选择城市，根据城市去搜索地区 -->
                <el-select @change="changeCity" v-model="questionsForm.province" style="width:48%;margin-right:2%">
                  <el-option v-for="item in cityOptions" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <!-- 地区 -->
                <el-select v-model="questionsForm.city" style="width:50%">
                  <el-option v-for="item in areaOptions" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="text-align:right">
                <el-button @click="clear()">清除</el-button>
                <el-button @click="search()" type="primary">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 记录提示信息  -->
        <el-alert :title="`数据一共有${total}条`" type="info" show-icon style="margin-bottom:15px">
        </el-alert>
        <!-- 数组部分 -->
        <el-table :data="questions">
          <el-table-column label="试题编号" prop="number"></el-table-column>
          <el-table-column label="学科" prop="subject"></el-table-column>
          <el-table-column label="目录" prop="catalog"></el-table-column>
          <el-table-column label="题型">
            <!-- bug记录 他妈的之前添加的测试数据有问题 两个小时淦 -->
            <template slot-scope="scope">
              {{ scope.row.questionType | tx }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="250px">
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="200px">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="难度">
            <!-- bug记录 他妈的之前添加的测试数据有问题 两个小时淦 -->
            <template slot-scope="scope">
              {{ scope.row.difficulty | nd }}
            </template>
          </el-table-column>
          <el-table-column label="录入人" prop="creator"></el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-button plain type="primary" size="small" circle icon="el-icon-view" title="预览"
                @click="openPreviewDialog(scope.row.id)"></el-button>
              <el-button plain type="success" size="small" circle icon="el-icon-edit" title="修改"
                @click="$router.push(`new?id=${scope.row.id}`)"></el-button>
              <el-button plain type="danger" size="small" circle icon="el-icon-delete" title="删除"
                @click="delQuestion(scope.row.id)"></el-button>
              <el-button plain type="warning" size="small" circle icon="el-icon-check" @click="addChoice(scope.row.id)"
                title="加入精选"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top:20px;text-align:right" layout="prev, pager, next, sizes, jumper" :total="total"
          :page-size="questionsForm.pagesize" :current-page="questionsForm.page" @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]" @size-change="handleSizeChange" background></el-pagination>
      </el-card>
    </div>
    <questionsPreview :show-dialog.sync="showDialog" :data="infodata"></questionsPreview>
  </div>
</template>

<script>
// 引入数据转换数据 难度/题型/方向
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
// 城市数据引入
import { provinces as getProvinces, citys as getCitys } from '@/api/hmmm/citys'
// 请求数据接口
import { choice, remove, choiceAdd, detail } from '@/api/hmmm/questions'
// 目录接口
import { simple as getdirectoryList } from '@/api/hmmm/directorys'
// 学科接口
import { simple as getsubjectList } from '@/api/hmmm/subjects'
// 用户接口
import { simple as getuserList } from '@/api/base/users'
// 标签接口
import { simple as gettagList } from '@/api/hmmm/tags'
//预览组件引入
import questionsPreview from '../components/questions-preview'
export default {
  data() {
    return {
      infodata: {},
      showDialog: false,//弹出层控制
      questionType,//题型数据
      difficulty,
      questionsForm: {
        // 学科
        subjectID: null,
        // 二级目录
        catalogID: null,
        // 标签
        tags: null,
        // 题型
        questionType: null,
        // 难度
        difficulty: null,
        // 方向
        direction: null,
        // 城市
        province: null,
        // 区域
        city: null,
        // 关键字
        keyword: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 录入人
        creatorID: null,
        // 二级目录
        catalogID: null,
        page: 1,
        pagesize: 5,

      },
      // 学科选项
      subjectOptions: [],
      // 目录选项
      directoryOptions: [],
      // 标签选项
      tagOptions: [],
      // 题型数据类型
      questionTypeOptions: questionType,
      // 难度数据
      diffOptions: difficulty,
      // 方向选项
      directionOptions: direction,
      // 录入人
      userOptions: [],
      // 城市
      cityOptions: getProvinces(),
      // 地区 当选择了城市的时候赋值
      areaOptions: [],
      // 数据信息
      questions: [],
      // 总条数
      total: 0,
    }
  },
  components: {
    questionsPreview
  },
  filters: {//过滤器 
    // 用过滤器原因
    tx(value) {//题型过滤器
      // console.log('----');
      // console.log(value);
      if (value) return questionType.find(item => item.value === +value).label + '题'
    },
    nd(value) {//难度过滤器
      if (value) return difficulty.find(item => item.value === +value).label
    },
  },
  // 初始化钩子函数
  async created() {
    // 学科下拉选项
    const result = await getsubjectList()
    console.log(result);
    this.subjectOptions = result.data//学科数据
    // 录入人选项
    const result2 = await getuserList()
    console.log(result2);
    this.userOptions = result2.data//用户数据
    this.getList()
  },
  methods: {
    // 请求题组数据
    async getList() {
      const result = await choice(this.questionsForm)
      console.log(result);
      this.questions = result.data.items
      console.log(this.questions);
      this.total = result.data.counts
    },
    // 学科发生改变触发 将选中的选项的value也就是subjectID
    async changeSubject(subjectID) {
      console.log(subjectID);
      // 清空二级目录
      this.questionsForm.catalogID = null
      // 清空标签
      this.questionsForm.tags = null
      // 获取目录
      const result = await getdirectoryList({ subjectID })
      // 将查询到的对应的学科赋值到目录选项
      this.directoryOptions = result.data
      // 标签下拉选项
      const result2 = await gettagList({ subjectID })
      this.tagOptions = result2.data
    },
    // 先选择城市，根据城市去搜索地区
    changeCity(province) {
      console.log(province);
      // 选中值发生变化时触发	province目前的选中值
      // 地区选中的数据清空
      this.questionsForm.city = null
      // areaOptions区数据数组
      this.areaOptions = getCitys(province)
    },
    // 清除表单
    clear() {
      // 清除掉除了页码和条数的所有字段
      for (const key in this.questionsForm) {
        if (key !== 'page' && key !== 'pagesize') this.questionsForm[key] = null
      }
    },
    // 搜索表单
    search() {
      this.questionsForm.page = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.questionsForm.page = val
      this.getList()
    },
    handleSizeChange(val) {
      this.questionsForm.page = 1
      this.questionsForm.pagesize = val
      this.getList()
    },
    // 通过单击触发对应的数据
    async openPreviewDialog(id) {
      // 通过对应的id值去查找详细数据并传递给组件
      // 这里可以直接把复用的数据请求给组件更简洁
      this.infodata = (await detail({ id })).data
      console.log(this.infodata);
      this.showDialog = true
    },
    // 删除对应题数据
    async delQuestion(id) {
      console.log(id);
      try {
        await remove({ id })
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.getList()
      } catch {
        this.$message.success('删除失败');
      }
    },
    // 加入精选功能
    async addChoice(id) {
      await this.$confirm('是否将该题目加入精选?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
      await choiceAdd({ id, choiceState: 1 })
      this.$message.success('加入精选成功')
      this.getList()
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.question {
  margin: 10px;

  .heard-text {
    font-size: 12px;
    color: pink;
  }
}
</style>
